<template>
    <div class="home">
        <!-- 1. 头部 -->
        <div class="header">
            <div class="item">
                <div class="total">
                    总销售额
                    <p>{{ count.saleTotal | fix }}</p>
                </div>
                <div class="today">今日销售额 :{{ count.sale | fix }}</div>
            </div>
            <div class="item">
                <div class="total">
                    总访问量
                    <p>{{ count.viewsTotal | fix }}</p>
                </div>
                <div class="today">今日访问量 :{{ count.views | fix }}</div>
            </div>
            <div class="item">
                <div class="total">
                    总收藏量
                    <p>{{ count.collectTotal | fix }}</p>
                </div>
                <div class="today">今日收藏 :{{ count.collect | fix }}</div>
            </div>
            <div class="item">
                <div class="total">
                    总支付量
                    <p>{{ count.payTotal | fix }}</p>
                </div>
                <div class="today">今日支付量 :{{ count.pay | fix }}</div>
            </div>
        </div>

        <!-- 2. 中间 -->
        <div class="center">
            <div class="item1">
                <p>月销售额</p>
                <div id="main" style="height:320px">
                </div>
            </div>
            <div class="item2">
                <p>产品销售比例</p>
                <div id="circle" style="height:320px;width:100%"></div>
            </div>
        </div>
        <!-- 3. 底部 -->
        <div class="bottom">
            <div class="item">
                <div class="tit">今日订单</div>
                <div class="info">
                    <div class="num">
                        <p>今日订单数</p>
                        <p>{{ order.curOrderCount }}</p>
                    </div>
                    <div class="num">
                        <p>汇总确认订单</p>
                        <p>{{ order.curCollect }}</p>
                    </div>
                    <div class="num">
                        <p>累计金额</p>
                        <p>{{ order.curMoney }}</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="tit">本月订单</div>
                <div class="info">
                    <div class="num">
                        <p>本月订单数</p>
                        <p>{{ order.orderCount }}</p>
                    </div>
                    <div class="num">
                        <p>汇总确认订单</p>
                        <p>{{ order.collect }}</p>
                    </div>
                    <div class="num">
                        <p>累计金额</p>
                        <p>{{ order.money }}</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="tit">快捷入口</div>
                <div class="info">
                    <el-button type="primary">产品管理</el-button>
                    <el-button>消息管理</el-button>
                    <el-button>内容管理</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            count: {},
            order: {}
        }
    },
    mounted() {
        this.getFormat();
    },
    created() {
        this.getDataCount();
        this.getOrder();
    },
    methods: {
        // 1. 获取统计的数据--------------------------
        async getDataCount() {
            let res = await this.$api.getDataCount();
            // console.log("统计-", res.data.data.list);
            this.count = res.data.data.list;
        },
        // 2. 获取今日订单数据-----------------------
        async getOrder() {
            let res = await this.$api.getOrder()
            // console.log("今日订单-", res.data.list);
            this.order = res.data.list;
        },
        // 3. 折线图和柱状图---------------------------
        main(dataX, dataY1, dataY2) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 绘制图表
            myChart.setOption({
                /* title: {//标题
                    text: 'ECharts 入门示例'
                }, */
                legend: {//示例
                    // left:"right"
                },
                tooltip: {
                    // formatter: "{b}<br/>{a}:{c}"
                    trigger: 'axis'
                },//提示
                xAxis: {//x轴数据
                    data: dataX,
                    // data: ['肉类', '水产', '蔬菜', '冷饮食品', '水果'],
                    /*  axisLine: {
                         lineStyle: {
                             color: "#ff0000"
                         }
                     }, */
                    axisTick: {//坐标轴刻度相关设置。
                        alignWithLabel: true
                    }
                },
                yAxis: {},//y轴数据
                series: [//图表内容
                    {
                        name: '销售额',
                        type: 'line',//bar--柱状图  line--折线图  pie--饼状图  map--地图
                        // data: [99, 20, 66, 20, 36],
                        data: dataY1,
                        smooth: true,//折现光滑
                    },
                    {
                        name: '销售量',
                        type: 'bar',//bar--柱状图  line--折线图  pie--饼状图  map--地图
                        // data: [33, 10, 50, 15, 10],
                        data: dataY2,
                    },
                ]
            });
        },
        // 4. 饼状图-----------------------------------
        circle(circle) {
            var myChart = echarts.init(document.getElementById('circle'));
            myChart.setOption({
                tooltip: {//提示
                    show: true,
                    trigger: 'item',
                    //{a}(系列名)，{b}(数据项名),{c}(数值),{d}(百分比)
                    formatter: "{a} <br/>{b} : {c} ({d}%)",
                    backgroundColor: "rgba(1, 13, 19, 0.5)",
                    borderWidth: 1,
                    textStyle: {
                        color: "rgba(212, 232, 254, 1)",
                    },
                },

                legend: {
                    orient: 'vertical',
                    top: 0,
                    left: 0,
                    // itemWidth: 15,
                    // itemHeight: 10,
                    // itemGap: 25,
                    borderRadius: 4,
                    textStyle: {
                        color: "#000",
                        fontFamily: "Alibaba PuHuiTi",
                        fontSize: 14,
                        fontWeight: 400,
                    },
                },
                series: [//图标内容
                    {
                        name: '销售额',
                        type: 'pie',
                        radius: '50%',
                        center: ['50%', '60%'],
                       /*  data: [
                            { value: 1048, name: '肉类' },
                            { value: 735, name: '水产' },
                            { value: 580, name: '蔬菜' },
                            { value: 484, name: '冷饮食品' },
                            { value: 300, name: '水果' }
                        ], */
                        data:circle,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        },
        // 5. 获取图表的数据------------------------------
        async getFormat() {
            let res = await this.$api.getFormat();
            // console.log("图表-", res.data.result.data.sale_money);//[{},{},{},{},{}]

            let data = res.data.result.data.sale_money;
            // 创建四个空数组
            let dataX = [], dataY1 = [], dataY2 = [], circle = [];//circle:[{name:,value:,},{}]
            
            // 遍历数组
            data.map(item => {
                dataX.push(item.name)//x轴数据
                dataY1.push(item.total_amount)//折线图数据
                dataY2.push(item.num)//柱状图数据
                
                // 获取饼图数据
                let obj = {};
                obj.name = item.name;
                obj.value = item.total_amount;
                circle.push(obj)
            })

            this.main(dataX, dataY1, dataY2);
            this.circle(circle)

        }
    },
    // 过过滤器--处理数字
    filters: {
        fix(val) {
            if (!val) { return "" }
            return val.toLocaleString()
        }
    }

}
</script>

<style lang="less" scoped>
.home {
    .header {
        display: flex;
        margin-top: 20px;

        .item {
            flex-grow: 1;
            margin: 0 20px;
            background: linear-gradient(#df887d, #88554d);
            height: 120px;
            border-radius: 10px;
            color: #fff;
            font-weight: 700;

            .total {
                padding: 10px 10px 0;

                p {
                    margin: 10px;
                    font-size: 22px;
                }
            }

            .today {
                border-top: 1px solid #f5f5f5;
                padding: 10px 20px;
            }

        }

        .item:nth-child(2) {
            background: linear-gradient(#409eff, #2e556e);
        }

        .item:nth-child(3) {
            background: linear-gradient(#b54fa8, #713c7a);
        }

        .item:nth-child(4) {
            background: linear-gradient(#1cd2f1, #39717a);
        }
    }

    .center {
        display: flex;
        margin: 20px 0;
        height: 340px;

        .item1 {
            flex-grow: 2.5;
            margin-right: 30px;
            height: 320px;
            background-color: #fff;
            padding: 10px;

            /deep/div:first-child {
                width: 100% !important;
            }

            /deep/ canvas {
                width: 100% !important;
            }
        }

        .item2 {
            flex-grow: 1;
            height: 320px;
            background-color: #fff;
            padding: 10px;

            /deep/div:first-child {
                width: 100% !important;
            }

            /deep/ canvas {
                width: 100% !important;
            }
        }

    }


    .bottom {
        margin-top: 20px;
        display: flex;

        .item {
            flex: 1;
            height: 150px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            border: 1px solid #EBEEF5;
            background-color: #fff;
            border-radius: 4px;

            .tit {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                font-weight: 700;
            }

            .info {
                text-align: center;
                padding: 20px;
                display: flex;

                .num {
                    flex: 1;
                    border-right: 1px solid #EBEEF5;

                    p:first-child {
                        font-size: 14px;
                        margin-bottom: 10px;
                    }

                    p:last-child {
                        font-size: 24px;
                    }
                }

                .num:last-child {
                    border-right: none;
                }
            }
        }

        .item:nth-child(2) {
            margin: 0 30px;
        }
    }
}
</style>